<template>
  <div class="add-analysis">
    <common-block :activeNum="activeNum" :steps="steps" :saveFlag="true">
      <div class="title" slot="title">新建分析</div>
    </common-block>
    <div class="bottom bottom-1" v-if="activeNum === 0">
      <template>
        <el-table
          :data="tableData"
          style="width: 100%"
          ref="singleTable"
          highlight-current-row
          @current-change="handleCurrentChange"
        >
          <el-table-column type="index" width="50"> </el-table-column>
          <el-table-column prop="title" label="任务名称"></el-table-column>
          <el-table-column prop="homeUrl" label="首页地址"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" @click="analysis(scope.row)">创建翻译任务</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </template>
    </div>
    <div class="bottom bottom-2" v-if="activeNum === 1">
      <div class="data-title">{{newAnalysis.translateName}}</div>
      <table border="0" cellspacing="1" cellpadding="0">
        <tr>
          <th>分析名称</th>
          <td colspan="1"><el-input v-model="newAnalysis.translateName"/></td>
          <th>首页地址</th>
          <td colspan="3">
            <el-input placeholder="请输入内容" v-model="analysisItem.homeUrl">
              <template slot="append"><el-button>获取标题</el-button></template>
            </el-input>
          </td>
        </tr>
        <tr>
          <th>包含性分析过滤(url)</th>
          <td colspan="1">
            <el-input placeholder="请输入内容" v-for="(item,index) in newAnalysis.analyzeIncludeFilter" :key="index" v-model="newAnalysis.analyzeIncludeFilter[index]">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  " @click="cutDown('newAnalysis','analyzeIncludeFilter',index)">-</el-button>
                <el-button style="border: 1px solid #ddd; font-weight: bold" @click="addition('newAnalysis','analyzeIncludeFilter')">+</el-button>
              </template>
            </el-input>
          </td>
          <th>排除性分析过滤(url)</th>
          <td colspan="1">
            <el-input placeholder="请输入内容" v-for="(item,index) in newAnalysis.analyzeExcludeFilter" :key="index" v-model="newAnalysis.analyzeExcludeFilter[index]">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  @click="cutDown('newAnalysis','analyzeExcludeFilter',index)">-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold" @click="addition('newAnalysis','analyzeExcludeFilter')">+</el-button
                >
              </template>
            </el-input>
          </td>
          <th>任务标签</th>
          <td colspan="1">
            <el-input placeholder="请输入内容" v-for="(item,index) in newAnalysis.analyzeTag" :key="index" v-model="analysisItem.taskTag[index]">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  @click="cutDown('analysisItem','taskTag',index)">-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold" @click="addition('analysisItem','taskTag')">+</el-button
                >
              </template>
            </el-input>
          </td>
        </tr>
        <tr>
          <th>包含性关键字过滤</th>
          <td colspan="1">
            <el-input placeholder="请输入内容" v-for="(item,index) in newAnalysis.analyzeIncludeKeyWord" :key="index" v-model="newAnalysis.analyzeIncludeKeyWord[index]">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  @click="cutDown('newAnalysis','analyzeIncludeKeyWord',index)">-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold" @click="addition('newAnalysis','analyzeIncludeKeyWord')">+</el-button
                >
              </template>
            </el-input>
          </td>
          <th>排除性关键字过滤</th>
          <td colspan="1">
            <el-input placeholder="请输入内容" v-for="(item,index) in newAnalysis.analyzeExcludeKeyWord" :key="index" v-model="newAnalysis.analyzeExcludeKeyWord[index]">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  @click="cutDown('newAnalysis','analyzeExcludeKeyWord',index)">-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold" @click="addition('newAnalysis','analyzeExcludeKeyWord')">+</el-button
                >
              </template>
            </el-input>
          </td>
          <th>辅助分析关键字</th>
          <td colspan="1">
            <el-input placeholder="请输入内容" v-for="(item,index) in newAnalysis.analyzeMatchWord" :key="index" v-model="newAnalysis.analyzeMatchWord[index]">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  @click="cutDown('newAnalysis','analyzeMatchWord',index)">-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold" @click="addition('newAnalysis','analyzeMatchWord')">+</el-button
                >
              </template>
            </el-input>
          </td>
        </tr>
        <tr>
          <th>状态</th>
          <td colspan="1" class="stateItem"><span :class="analysisItem.toStateObj.key"></span>{{analysisItem.toStateObj.value}}</td>
          <th>任务进度</th>
          <td colspan="3"></td>
        </tr>
        <tr>
          <th>上次启动时间</th>
          <td colspan="1">{{analysisItem.lastStartTimeStr||'未启动'}}</td>
          <th>任务用时</th>
          <td colspan="1"><el-input type="number" v-model="analysisItem.analyzeCostTime"/></td>
          <th>失败数量</th>
          <td colspan="1"><el-input type="number" v-model="analysisItem.analyzeFailed"/></td>
        </tr>
      </table>
    </div>
    <div class="bottom bottom-3" v-if="activeNum === 2">
      <div class="data-title">sdfsdfsdfsdf</div>
      <table border="0" cellspacing="1" cellpadding="0">
        <tr>
          <th>分析名称</th>
          <td colspan="1"><el-input readonly disabled="true" v-model="newAnalysis.translateName"/></td>
          <th>首页地址</th>
          <td colspan="1"><el-input readonly disabled="true" v-model="analysisItem.homeUrl"/></td>
        </tr>
        <tr>
          <th>分析规则</th>
          <td colspan="3">新建时不可用</td>
        </tr>
      </table>
    </div>
    <div class="bottom bottom-4" v-if="activeNum === 3">
      <div class="data-title">sdfsdfsdfsdf</div>
      <table border="0" cellspacing="1" cellpadding="0">
        <tr>
          <th>分析名称</th>
          <td colspan="1">{{newAnalysis.translateName}}</td>
          <th>首页地址</th>
          <td colspan="3">{{analysisItem.homeUrl}}</td>
        </tr>
        <tr>
          <th>包含性分析过滤(url)</th>
          <td colspan="1">
              <p v-for="(item,index) in newAnalysis.analyzeIncludeFilter" :key="index">{{item}}</p>
          </td>
          <th>排除性分析过滤(url)</th>
          <td colspan="1">
              <p v-for="(item,index) in newAnalysis.analyzeExcludeFilter" :key="index">{{item}}</p>
          </td>
          <th>任务标签</th>
          <td colspan="1">
              <p v-for="(item,index) in newAnalysis.analyzeTag" :key="index">{{item}}</p>
          </td>
        </tr>
        <tr>
          <th>包含性关键字过滤</th>
          <td colspan="1">
              <p v-for="(item,index) in newAnalysis.analyzeIncludeKeyWord" :key="index">{{item}}</p>
          </td>
          <th>排除性关键字过滤</th>
          <td colspan="1">
              <p v-for="(item,index) in newAnalysis.analyzeExcludeKeyWord" :key="index">{{item}}</p>
          </td>
          <th>辅助分析关键字</th>
          <td colspan="1">
              <p v-for="(item,index) in newAnalysis.analyzeMatchWord" :key="index">{{item}}</p>
          </td>
        </tr>
        <!--<tr>-->
          <!--<th>下载大小</th>-->
          <!--<td colspan="1"></td>-->
          <!--<th>分析文件数</th>-->
          <!--<td colspan="1"></td>-->
          <!--<th>创建时间</th>-->
          <!--<td colspan="1"></td>-->
        <!--</tr>-->
        <!--<tr>-->
          <!--<th>状态</th>-->
          <!--<td colspan="1"></td>-->
          <!--<th>任务进度</th>-->
          <!--<td colspan="3"></td>-->
        <!--</tr>-->
        <tr>
          <th>上次启动时间</th>
          <td colspan="1">{{analysisItem.lastStartTimeStr||'未启动'}}</td>
          <th>任务用时</th>
          <td colspan="1">{{analysisItem.analyzeCostTime}}</td>
          <th>失败数量</th>
          <td colspan="1">{{analysisItem.analyzeFailed}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import CommonBlock from "@/components/CommonBlock.vue";
import {WebSiteTask,WebTranslateTaskPost} from '../../api/api'
import {toState} from '../../utils/common'
export default {
  components: {
    CommonBlock,
  },
  data() {
    return {
      activeNum: 0,
      steps: ["选择模板", "新建分析", "主要分析设置", "保存分析"],
      total: 0,
      currentPage: 1,
        pageSize: 10,
      selectRows: [],
      tableData: [],
       analysisItem:{},
        newAnalysis:{
            "analyzeAfterSleepMs": 0,
            "analyzeAuto": true,
            "analyzeCostTime": 0,
            "analyzeCustomDateFormat": "",
            "analyzeCustomDateRule": "",
            "analyzeDataDir": "",
            "analyzeEnable": true,
            "analyzeExcludeFilter": [
                ""
            ],
            "analyzeExcludeKeyWord": [
                ""
            ],
            "analyzeFailed": 0,
            "analyzeFailedTimes": 0,
            "analyzeFiltered": 0,
            "analyzeFinished": 0,
            "analyzeFirstStartTime": "",
            "analyzeImageRange": [
                ""
            ],
            "analyzeIncludeFilter": [
                ""
            ],
            "analyzeIncludeKeyWord": [
                ""
            ],
            "analyzeIncludeOuterUrl": [
                ""
            ],
            "analyzeLastStartTime": "",
            "analyzeMatchWord": [
                ""
            ],
            "analyzeMultiHomeLinks": [
                ""
            ],
            "analyzeName": "string",
            "analyzePageRange": [
                ""
            ],
            "analyzeScriptRange": [
                ""
            ],
            "analyzeState": "",
            "analyzeTag": [
                ""
            ],
            "analyzeThreadSize": 0,
            "analyzeTimeOutMs": 0,
            "analyzeTimeOutRetryTimes": 0,
            "analyzeTotal": 0,
            "analyzeType": [
                ""
            ],
            "analyzeUnFinished": 0,
            "analyzeVersion": "",
            "createBy": "string",
            "createTime": "",
            "deleted": false,
            "idWebAnalyzeTask": "",
            "idWebSiteTask": "",
            "pageTotal": 0,
            "recentMinuteAnalyzedCount": 0,
            "updateBy": "",
            "updateExcludeFilter": [
                ""
            ],
            "updateIncludeFilter": [
                ""
            ],
            "updateTime": ""
        }
    };
  },
    mounted(){
      this.getList()
    },
  methods: {
      save(){
          WebTranslateTaskPost(this.newAnalysis).then(()=>{
              this.$message.success("新建成功");
              this.$parent.saveSuccess();
              this.activeNum=0;
              this.analysisItem={};
              this.newAnalysis={
                  "analyzeAfterSleepMs": 0,
                  "analyzeAuto": true,
                  "analyzeCostTime": 0,
                  "analyzeCustomDateFormat": "",
                  "analyzeCustomDateRule": "",
                  "analyzeDataDir": "",
                  "analyzeEnable": true,
                  "analyzeExcludeFilter": [
                      ""
                  ],
                  "analyzeExcludeKeyWord": [
                      ""
                  ],
                  "analyzeFailed": 0,
                  "analyzeFailedTimes": 0,
                  "analyzeFiltered": 0,
                  "analyzeFinished": 0,
                  "analyzeFirstStartTime": "",
                  "analyzeImageRange": [
                      ""
                  ],
                  "analyzeIncludeFilter": [
                      ""
                  ],
                  "analyzeIncludeKeyWord": [
                      ""
                  ],
                  "analyzeIncludeOuterUrl": [
                      ""
                  ],
                  "analyzeLastStartTime": "",
                  "analyzeMatchWord": [
                      ""
                  ],
                  "analyzeMultiHomeLinks": [
                      ""
                  ],
                  "analyzeName": "string",
                  "analyzePageRange": [
                      ""
                  ],
                  "analyzeScriptRange": [
                      ""
                  ],
                  "analyzeState": "",
                  "analyzeTag": [
                      ""
                  ],
                  "analyzeThreadSize": 0,
                  "analyzeTimeOutMs": 0,
                  "analyzeTimeOutRetryTimes": 0,
                  "analyzeTotal": 0,
                  "analyzeType": [
                      ""
                  ],
                  "analyzeUnFinished": 0,
                  "analyzeVersion": "",
                  "createBy": "string",
                  "createTime": "",
                  "deleted": false,
                  "idWebAnalyzeTask": "",
                  "idWebSiteTask": "",
                  "pageTotal": 0,
                  "recentMinuteAnalyzedCount": 0,
                  "updateBy": "",
                  "updateExcludeFilter": [
                      ""
                  ],
                  "updateIncludeFilter": [
                      ""
                  ],
                  "updateTime": ""
              }
          })
      },
      addition(key1,key2){
          this[key1][key2].push('')
      },
      cutDown(key1,key2,index){
          this[key1][key2].splice(index, 1)
      },
      analysis(row){
          this.analysisItem=row;
          row.toStateObj=toState('' + row.taskState);
          this.newAnalysis.analyzeExcludeFilter=row.downLoadExcludeFilter.length===0?['']:row.downLoadExcludeFilter;
          this.newAnalysis.analyzeIncludeFilter=row.downLoadIncludeFilter.length===0?['']:row.downLoadIncludeFilter;
          this.newAnalysis.analyzeTag=row.taskTag.length===0?['']:row.taskTag;
          this.newAnalysis.translateName=row.title;
          // this.newAnalysis.analyzeExcludeKeyWord=row.downLoadExcludeFilter||[];
          // this.newAnalysis.analyzeMatchWord=row.analyzeMatchWord;
          this.activeNum=1
      },
      getList(){
          WebSiteTask({
              current:this.currentPage,
              size:this.pageSize
          }).then(res=>{
              this.tableData=res.data.records
          })
      },
    upStep() {
      this.activeNum -= 1;
      if (this.activeNum === 0) {
        this.$refs.singleTable.setCurrentRow(this.selectRows);
      }
    },
    downStep() {
      if (this.activeNum===0&&Object.keys(this.selectRows).length === 0) {
        this.$message.error("请选择一条数据");
        return false;
      } else {
        this.activeNum += 1;
      }
    },
    handleCurrentChange(val) {
      this.selectRows = val;
    },
  },
};
</script>
<style lang="scss" scoped>
.add-analysis {
  display: flex;
  flex-direction: column;
  .title {
    font-size: 1.5rem;
    color: #000;
    display: inline-block;
    font-weight: bold;
  }
  .bottom {
    flex: 1;
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
    .data-title {
      border: 1px solid #ebeef5;
      padding: 0.8rem 0.5rem;
      width: 100%;
      text-align: center;
      background: #fafafa;
      font-size: 1rem;
      padding: 1rem 0;
      border-bottom: none;
    }
  }
  .el-pagination {
    width: 100%;
    text-align: right;
    padding: 0;
    margin: 0.5rem 0;
  }
  table {
    width: 100%;
    background: #e8e8e8;
    td {
      background: #fff;
      padding: 1rem 1.5rem;
      text-align: left;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
    }
    th {
      background: #fafafa;
      padding: 1rem 1.5rem;
      text-align: left;
      color: rgba(0, 0, 0, 0.85);
      font-weight: normal;
      font-size: 0.9rem;
      line-height: 1.5;
      width: 10rem;
    }
  .stateItem{
      span{
          display: inline-block;
          height: 6px;
          width: 6px;
          background: #d9d9d9;
          border-radius: 50%;
          vertical-align: middle;
          margin-right: 10px;
          margin-top: -2px;
      }
      .processing{
          background: #1890ff;
      }
      .success {
          background-color: #52c41a;
      }
      .error {
          background-color: #f5222d;
      }
  }
  }
}
</style>
